<script src="/js/validateIsMain.js"></script>
<div id="subContainer">
    <header class="page-header no-margin">
        <div class="container-fluid">
            <h2 class="no-margin-bottom" style="margin-top: 0px; font-size: 20px;">镜像</h2>
        </div>
    </header>

    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item active">镜像</li>
        </ul>
    </div>

    <section class="tables">
        <div class="container-fluid">
            <div class="row">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">镜像列表</h3>
                    </div>
                    <div class="card-body" style="padding-top: 0px;">
                        <form class="form-inline" action="#">
                            <div class="form-group">
                                <input type="text" placeholder="请输入容器名称" class="form-control mr-3"
                                       v-model="pageInfo.name">
                            </div>
                            <div class="form-group">
                                <input type="text" placeholder="xxxx" class="form-control mr-3">
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-success"
                                        @click="pagequery()"><i class="fa fa-search"></i>查询
                                </button>
                                <button type="button" class="btn btn-default"
                                        @click="addImage()"><i class="fa fa-plus">新增</i></button>
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <th>序号</th>
                                <th>ID</th>
                                <th>标签名称</th>
                                <th>版本号</th>
                                <th>创建时间</th>
                                <th>大小</th>
                                <th>操作</th>
                                </thead>
                                <tbody>
                                <tr v-for="(item, index) in items">
                                    <th scope="row">{{index + 1}}</th>
                                    <td>
                                        <span :title="item.Id" style="cursor: help;">{{textIdFilter(item.Id)}}</span>
                                    </td>
                                    <td>
                                        <span :title="nameFilter(item.RepoTags[0], 0)" v-if="item.RepoTags">{{nameFilter(item.RepoTags[0], 0, 20)}}</span>
                                        <span v-if="!item.RepoTags">无</span>
                                    </td>
                                    <td>
                                        <span :title="nameFilter(item.RepoTags[0], 1)" v-if="item.RepoTags">{{nameFilter(item.RepoTags[0], 1, 10)}}</span>
                                        <span v-if="!item.RepoTags">无</span>
                                    </td>
                                    <td><span>{{item.Created *1000 | toNow}}</span></td>
                                    <td><span>{{item.Size | fileSize}}</span></td>
                                    <td>
                                        <a class="btn btn-xs btn-info text-white" @click="details(item)"
                                           style="font-size: 0.7rem; padding: 0.2rem;"><i class="fa fa-copy"></i>详情</a>
                                        <a href="#" class="btn btn-xs btn-danger" @click="deleteImages(item)"
                                           style="font-size: 0.7rem; padding: 0.2rem;"><i
                                                class="fa fa-trash-o"></i>删除</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!--                            <div class="pageination">-->
                            <!--                                <pageination :total="pageInfo.total" :size="pageInfo.size" :page="pageInfo.pageNum"-->
                            <!--                                             :changge="pageFn"></pageination>-->
                            <!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="main-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a
                            href="http://www.jq22.com/" target="_blank" title="jq22">jq22</a></p>
                </div>
                <div class="col-sm-6 text-right">
                    <p></p>
                </div>
            </div>
        </div>
    </footer>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">镜像</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">镜像:</label>
                            <div class="col-sm-9">
                                <input class="form-control" type="text" v-model="pageInfo.imageAddr"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" @click="submitNewImages()">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    indexPage = new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/survey/',
            pageInfo: {
                pageNum: 1,
                total: 100,//总页数
                size: 10,//每页显示条目个数不传默认10
                imageAddr: 'daocloud.io/library/mysql:5.6.17'
            },
            items: []
        },
        created: function () {
            this.pagequery();
        },
        methods: {
            details(item) {
                toPage('/pages/images/details.html', item.Id);
            },
            deleteImages(item) {
                let that = this;
                confirm("您确定要删除这个镜像吗?", "", function (isConfirm) {
                    if (isConfirm) {
                        AJAX.DELETE('/images', {id: item.Id}, function (resp) {
                            toastr.success(resp.msg);
                            that.pagequery();
                        })
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
            },
            submitNewImages() {
                AJAX.POST("/images", {"image": this.pageInfo.imageAddr}, function (resp) {
                    toastr.success(resp.msg, '成功');
                    $("#myModal").modal("hide")
                })
            },
            addImage() {
                $("#myModal").modal("show")
            },
            pagequery: function () {
                var that = this;
                AJAX.GET('/images', this.pageInfo, function (resp) {
                    that.items = resp.data.list;
                    that.pageInfo.pageNum = resp.data.pageNum;
                    that.pageInfo.total = resp.data.total;
                })
            },
            pageFn: function (val) {
                this.pageInfo.pageNum = val;
                this.pagequery();
            },
            textFilter(text, num) {
                num = num ? num : 12;
                if (text.length > num) {
                    return text.substr(0, num) + '...';
                }
                return text
            },
            textIdFilter(text, num) {
                num = num ? num : 12;
                if (text.length - 7 > num) {
                    text = text.substr(7, text.length);
                    return text.substr(0, num) + '...';
                }
                return text;
            },
            nameFilter(text, index, size) {
                size = size ? size : 1000;
                if (text) {
                    text = text.split(":")[index];
                    if (text.length > size) {
                        return text.substr(0, size) + '...';
                    }
                }
                return text;
            }
        }
    });
</script>